<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .a {
        background-color: antiquewhite;
      }
      .b {
        background-color: azure;
      }
      .c {
        background-color: rgb(200, 200, 252);
      }
      .active {
        color: white;
        background-color: brown;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <p>
        <input type="text" v-model="title" /><button @click="addList">
          添加
        </button>
      </p>

      <p>
        <button :class="{active:curStatus===0}" @click="getLists(0)">
          全部
        </button>
        <button :class="{active:curStatus===1}" @click="getLists(1)">
          未完成
        </button>
        <button :class="{active:curStatus===2}" @click="getLists(2)">
          进行中
        </button>
        <button :class="{active:curStatus===3}" @click="getLists(3)">
          已完成
        </button>
      </p>

      <table border="1">
        <thead>
          <tr>
            <th>编号</th>
            <th>标题</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="li in lists"
            :key="li.id"
            :class="{a:li.status===1,b:li.status===2,c:li.status===3}"
          >
            <td>{{li.id}}</td>
            <td>{{li.title}}</td>
            <td>{{statusCode[li.status]}}</td>
            <td>
              <button @click="deleteList(li.id)">删除</button>
              <button v-if="li.status!==1" @click="changeStatus(li.id,1)">
                未完成
              </button>
              <button v-if="li.status!==2" @click="changeStatus(li.id,2)">
                进行中
              </button>
              <button v-if="li.status!==3" @click="changeStatus(li.id,3)">
                已完成
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <script src="./vue.js"></script>
    <script src="./axios.min.js"></script>
    <script>
      /*
        1. 获取后台数据
        2. 将数据存放到data
        3. 将数据展示到视图（html）v-for
      */
      const request = axios.create({ baseURL: "http://127.0.0.1:8081" });
      new Vue({
        el: "#app",
        data: {
          title: "",
          curStatus: 0,
          statusCode: {
            1: "未完成",
            2: "进行中",
            3: "已完成",
          },
          lists: [], //list数据
        },
        created() {
          this.getLists();
        },
        methods: {
          async addList() {
            if (this.title === "") return;
            await request.post("/lists", {
              title: this.title,
              status: 1,
            });
            this.title = ""; //清空输入框
            this.getLists();
          },
          async deleteList(id) {
            if (confirm("确定删除吗") === false) return;
            await request.delete(`/lists/${id}`);
            this.getLists();
          },
          async changeStatus(id, status) {
            await request.patch(`/lists/${id}`, {
              status,
            });
            this.getLists(); //重新获取最新数据
          },
          async getLists(status) {
            this.curStatus = status;//表示当前选中按钮
            const where = {};
            if (status !== 0) {
              where.status = status;
            }
            //请求lists数据
            const { data } = await request.get("/lists", {
              params: where,
            });
            this.lists = data; //保存数据
          },
        },
      });
    </script>
  </body>
</html>
